<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="增加">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="标识" size="mini" prop="key">
              <el-input v-model="form.key" name="key">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="22">
            <el-form-item label="广告位" size="mini" prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="22">
            <el-form-item label="宽度" size="mini" prop="width">
              <el-input-number v-model="form.width" name="width" type="textarea" :min="0"
                               :max="100"></el-input-number>
            </el-form-item>

          </el-col>
          <el-col :span="22">
            <el-form-item label="高度" size="mini" prop="height">
              <el-input-number v-model="form.height" name="height" type="textarea" :min="0"
                               :max="100"></el-input-number>
            </el-form-item>

          </el-col>
          <el-col :span="22">
            <el-form-item label="备注" size="mini" prop="note">
              <el-input v-model="form.note" name="note" type="textarea"></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="22">
            <el-form-item>
              <el-button @click="goBack">取消</el-button>
              <el-button type="primary" @click="createData">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>

import {ref} from "vue";
import {useData} from "@/utils/useData";
import {useCreate} from "@/uses/useCreate";

const form = ref({
  key: '',
  name: '',
  width: '',
  height: '',
  note: ''
})

const rules = ref({
  key: [
    {required: true, message: '请输入标识', trigger: 'blur'}
  ],
  name: [
    {required: true, message: '请输入广告位', trigger: 'blur'}
  ]
})

const ruleForm = ref(null);

const {createData, goBack} = useCreate("adPosition", form, ruleForm)




</script>

<style scoped>
</style>
